<template>
  <div id="app">
    <el-row style="height: 100%">
      <el-col :span="4" style="height: 100%; background: #000">
        <el-col>
          <p class="bg" style="color: skyblue">HAPPY</p>
          <p class="bg" style="color: #ffff">MMALL</p>
          <el-menu
            background-color="#545c64"
            text-color="rgb(177, 175, 175)"
            active-text-color="#fff"
            router
          >
            <el-menu-item index="/">
              <i class="el-icon-menu"></i>
              <span slot="title">首页</span>
            </el-menu-item>

            <el-submenu index="/prodect/index">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>商品</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/prodect/index">商品管理</el-menu-item>
                <el-menu-item index="/category/index">品类管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="/order/index">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>订单</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/order/index">订单管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="/user/index">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>用户</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/user/index">用户列表</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-col>
      </el-col>

      <el-col :span="20" style="height: 100%; background: #eee">
        <p class="head"><span style="">欢迎你。admin</span></p>
        <router-view class="box" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { Menu, MenuItemGroup, MenuItem, Submenu, Row, Col } from "element-ui";
export default {
  components: {
    [Menu.name]: Menu,
    [MenuItemGroup.name]: MenuItemGroup,
    [MenuItem.name]: MenuItem,
    [Submenu.name]: Submenu,
    [Row.name]: Row,
    [Col.name]: Col,
  },
};
</script>
<style lang="scss">
html,
body {
  width: 100%;
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
}
#app {
  text-align: center;
  color: #2c3e50;
  height: 100%;
}

.bg {
  height: 50px;
  line-height: 50px;
  font-size: 25px;
  background: #000;
}
.active {
  background: skyblue;
}
.head {
  width: 100%;
  line-height: 50px;
  background: #fff;
  text-align: right;
}
</style>
